背景知识

Hexo 是一款基于 Node.js 用于快速搭建博客的框架，有了它就可以完成完成个人博客的构建，它会帮你构建博客的整个框架，你只需要会使用Markdown 写博客即可。

Github Page 是 Github 提供的静态网站托管服务，可从 Github 仓库中展示你的个人、组织或者项目的静态网页。

搭建环境

目标环境：

windows10 + Node.js + Hexo + Git

安装必要软件

安装 Node.js

下载安装包安装

查看是否安装成功：

1	npm --version

安装 Hexo

1	npm install hexo-cli -g

查看是否安装成功：

1	hexo --version

安装 Git

下载安装包安装

配置 Git SSH key

要使用无密码方式连接到 Github仓库，需要使用公钥认证机制。我们需要在主机上生成公钥和私钥密码对，并将公钥配置到个人的Github账户中。

打开一个 Git 命令终端 Git Bash：

生成 SSH key

1	ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

将上述邮箱改成自己的邮箱，按提示，一路 Enter ，默认的产生的公钥和私钥文件在 /c/Users/you/.ssh/ 目录下，其中 id_rsa 为私钥，id_rsa.pub 为私钥。

添加 SSH key 到 ssh-agent

如果使用了 Github Desktop，可以忽略这步。

打开 ssh-agent：

1	eval $(ssh-agent -s)

添加 SSH 私钥到 ssh-agent

1	ssh-add ~/.ssh/id_rsa

添加 SSH key 到个人的 Github 账户

复制公钥文件 id_rsa.pub 中的内容

打开 Github 账户的设置页面，找到 ==SSH and GPG keys== 选项，新建一个 SSH key，将复制的内容粘贴到 key 输入框中，最后确认添加 SSH key。

配置 Hexo

初始化一个博客目录

1
2
3

hexo init blog
cd blog
npm install

使用主题

Hexo 自带的主题相当的简陋，所以Hexo 提供了丰富的 Blog 主题。

个人喜欢的一个主题 Butterfly

Blog Screen

安装主题 Butterfly

1	git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

安装主题 Butterfly

1	git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

修改 blog 目录下的 _config.yml文件，应用主题 Butterfly

1	theme: Butterfly

配置 Butterfly 请查看 Butterfly 配置文档，可将 Butterfly 主题的配置文件复制到 source/_data/butterfly。

1 2	mkdir source/_data cp theme/Butterfly/_config source/_data/butterfly

安装使用该主题必要的包

1	npm install hexo-renderer-jade hexo-renderer-stylus --save

配置博客根目录下的 _config.yml，添加：

deploy:
	type: git
	reop: <repository url> #https://github.com/BingSlient/BingSlient.github.io.git
	branch: [branch] #published

安装 git 发布的包

1	npm intall hexo-deployer-git --save

使用 Github Page 仓库

建立一个新的 Github Page 仓库作为用于托管个人博客内容。

新建一个 Github 仓库，仓库名格式如下：

1	username.github.io

username 为你的 Github 账户的用户名。

写博客

创建一个新页面

1	hexo new [layout] <title>

Hexo 有三种默认布局：post、page 和 draft，它们分别对应不同的路径，自定义的其他布局和 post 相同，都将储存到 source/_posts 文件夹。

布局	路径
`post`	`source/_posts`
`page`	`source`
`draft`	`source/_drafts`

一般情况下都使用默认的布局，如下新建一篇名为 Hello World的博文

1	hexo new Hello-World

打开 source/_posts/Hello-World.md，有如下内容：

---
title: Hello-World
date: 2019-08-08 00:42:26
tags:
---

这部分内容称为 Front-matter，用于定义生成网页的一些变量，Hexo 预定义的参数如下：

参数	描述	默认值
`layout`	布局
`title`	标题
`date`	建立日期	文件建立日期
`updated`	更新日期	文件更新日期
`comments`	开启文章的评论功能	true
`tags`	标签（不适用于分页）
`categories`	分类（不适用于分页）
`permalink`	覆盖文章网址
`keywords`	仅用于 meta 标签和 Open Graph 的关键词（不推荐使用）

只有 post 类型的文章支持分类和标签，可以在 Front-matter 中设置。在其他系统中，分类和标签听起来很接近，但是在 Hexo 中两者有着明显的差别：分类具有顺序性和层次性，也就是说 Foo, Bar 不等于 Bar, Foo；而标签没有顺序和层次。

categories:
- Diary
tags:
- PS3
- Games

使用额外的主题或者插件会有额外的参数，这些参数的设置需要参考相应的文档。

使用喜欢的编辑器，完成博文的编辑，推荐使用 Typora。

生成静态文件

完成博文 .md 文件的编辑后，需要生成其对应的网页文件：

1	hexo generate #同 hexo g

监视文件变动

Hexo 能够监视文件变动并立即重新生成静态文件，在生成时会比对文件的 SHA1 checksum，只有变动的文件才会写入。

1	hexo generate --watch

发布博文到 Github Page

Hexo 使用简单命令就可以将生成网站内容部署到服务器上，这里我们使用 Github Page 作为这个服务器。

1	hexo deploy #同 hexo d

执行上述命令，Hexo 会将内容推送到 Github 仓库 https://github.com/username/username.github.io 中。

可以使用以下两个命令，生成网页文件并部署到服务器中，两个命令作用一样

1 2	hexo generate --deploy hexo deploy --generate

以上两个命令也可简写为：

1 2	hexo g -d hexo d -g

浏览器打开 https://username.github.io 即可访问个人博客了。

参考资料

[1] Hexo Deployment

[2] Butterfly 配置